<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    modelValue: { type: Number, required: true },
  },
  emits: {
    "update:modelValue": (value: number) => typeof value === "number",
  },
  setup(props, ctx) {
    const tabClick = (index: number) => {
      ctx.emit("update:modelValue", index);
    };

    return { tabClick };
  },
});
</script>

<template>
  <view class="tab-picker">
    <template v-if="modelValue === 0">
      <view class="tab-picker-btn" style="right: 0" @click="tabClick(1)">
        <image class="tab-picker-bg" src="/static/index-task-tab2.png" />
        <view class="tab-picker-text" style="padding-left: 30rpx">
          <image class="tab-picker-icon" src="/static/index-task-user2.png" />
          游客需求
        </view>
      </view>
      <view class="tab-picker-btn2">
        <image class="tab-picker-bg2" src="/static/index-task-tab.png" />
        <view class="tab-picker-text2" style="padding-right: 30rpx">
          <image class="tab-picker-icon" src="/static/index-task-team.png" />
          <view style="position: relative">
            <view class="tab-picker-line"></view>
            <view style="position: relative">机构需求</view>
          </view>
        </view>
      </view>
    </template>
    <template v-else>
      <view class="tab-picker-btn" style="left: 0" @click="tabClick(0)">
        <image
          class="tab-picker-bg"
          src="/static/index-task-tab2.png"
          style="transform: rotateY(180deg)"
        />
        <view class="tab-picker-text" style="padding-right: 30rpx">
          <image class="tab-picker-icon" src="/static/index-task-team2.png" />
          机构需求
        </view>
      </view>
      <view class="tab-picker-btn2" style="margin-left: auto">
        <image
          class="tab-picker-bg2"
          src="/static/index-task-tab.png"
          style="transform: rotateY(180deg)"
        />
        <view class="tab-picker-text2" style="padding-left: 30rpx">
          <image class="tab-picker-icon" src="/static/index-task-user.png" />
          <view style="position: relative">
            <view class="tab-picker-line"></view>
            <view style="position: relative">游客需求</view>
          </view>
        </view>
      </view>
    </template>
  </view>
</template>

<style lang="scss">
.tab-picker {
  position: relative;
  display: flex;

  .tab-picker-btn {
    position: absolute;
    bottom: 0;
  }

  .tab-picker-bg,
  .tab-picker-bg2 {
    display: block;
    width: 420rpx;
    height: 80rpx;
  }

  .tab-picker-text,
  .tab-picker-text2 {
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30rpx;
    color: #ff7900;
    white-space: nowrap;
    transform: translate(-50%, -50%);
  }

  .tab-picker-icon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 10rpx;
  }

  .tab-picker-btn2 {
    position: relative;
  }

  .tab-picker-bg2 {
    width: 434rpx;
    height: 92rpx;
  }

  .tab-picker-text2 {
    font-size: 34rpx;
    color: #000000;
    line-height: 48rpx;
    font-weight: bold;
  }

  .tab-picker-line {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 108rpx;
    height: 16rpx;
    border-radius: 8rpx;
    background: linear-gradient(90deg, #ff7900, rgba(255, 121, 0, 0));
  }
}
</style>